import './prove.less';
import React, { Component } from 'react';
import moment from "moment";
import icon from '../../../assets/images/icon.png';
import $$ from "cmn-utils";
class ProveDom extends Component {
    state = {
        qualified:[],
        unqualified:[],
    }
    componentDidMount() {
    $$.post('/api/statistics/studentList',{classId:this.props.record.classId,lessonId:this.props.record.id}).then(item => {
        if (item.data) {
            const qualified = [];
            const unqualified = [];
            
            item.data.map(res => {
                if (res.lessonHours === res.finishNum) {
                    qualified.push(res);
                } else {
                    unqualified.push(res);
                }
            });
            this.setState({
                qualified,
                unqualified,
            })
        }
        this.setState({
            item:JSON.stringify(item)
        })
    })
    }
    render(){
        const item = this.props.record;
        const bodycontent={
            'width':' 100vw',
            // 'height':'100vh',
            // 'overflow':'hidden',
            // 'page-break-after':'avoid'
        }
        const iconImgstyle={
            'position':' absolute',
            'z-index':'-1',
            'float':'left',
            'width':'200px',
            'height':' 200px',
            'left':'50px',
        }
        const h2style={
            'width':'100%',
            'font-size':'30px',
            'padding-top':'50px',
            'text-align':' center',
        }
        const h4style={
            'width':'100%',
            'font-size':'20px',
            'margin-bottom':'20px',
            'padding-top':'50px',
        }
        const spanstyle={
            'float':'right',
        }
        const tablestyle={
            'margin-top':'20px',
            'width':'100%',
            'text-align':'center',
            'font-size':'20px',
            'line-height':' 30px',
        }
        const trstyle={
            'width':'100%',
            'fontSize':'20px',
            'lineHeight':'30px'
        }
        const tdstyle = {
            'font-size':'20px',
            'line-height':'40px'
        }
        const name = item.categoryName;
        const categoryName = name.substr(name.indexOf('（')+1,name.indexOf('）')-name.indexOf('（')-1)
        return(
            <div className="bodycontent" style={bodycontent}>
                <img src={icon} className="iconImg" style={iconImgstyle}></img>
                <h2 style={h2style}>学员统计情况总表</h2>
                <h4 style={h4style}>平台名称：数恒职业教育服务平台 <span style={spanstyle}>制表日期:{moment().format('YYYY-MM-DD')}</span></h4>
                <table className="tg" border="1" style={tablestyle} cellpadding="0" cellspacing="0">
                    <thead>
                        <tr style={trstyle}>
                            <td colspan="3">机构名称</td>
                            <td colspan="3">班级名称</td>
                        </tr>
                        <tr style={trstyle}>
                            <td colspan="3" style={tdstyle}>{item.campus}</td>
                            <td colspan="3">{item.className}</td>
                        </tr>
                        <tr style={trstyle}>
                            <td colspan="2">开班时间</td>
                            <td colspan="2">课程分类</td>
                            <td colspan="2">课程级别</td>
                        </tr>
                        <tr style={trstyle}>
                            <td colspan="2">{moment.utc(item.createTime).format('YYYY-MM-DD HH:mm')}</td>
                            <td colspan="2">{item.category}</td>
                            <td colspan="2">{categoryName}</td>
                        </tr>
                        <tr style={trstyle}>
                            <td colspan="2">总课时</td>
                            <td colspan="2">培训人数</td>
                            <td colspan="2">合格人数</td>
                        </tr>
                        <tr style={trstyle}>
                            <td colspan="2">{item.classHours}</td>
                            <td colspan="2">{item.classSize}</td>
                            <td colspan="2">{item.finishNum}</td>
                        </tr>
                        <tr style={trstyle}>
                            <td colspan="6">合格学员名单</td>
                        </tr>
                        {
                            this.state.qualified.length === 0?
                            <tr style={trstyle}>
                                <td colspan="6">暂无</td>
                            </tr>
                            :
                            <tr style={trstyle}>
                                <td>序号</td>
                                <td>姓名</td>
                                <td>身份证号</td>
                                <td>手机号</td>
                                <td>性别</td>
                                <td>完成学时</td>
                            </tr>
                        }
                        
                        {
                            this.state.qualified.map((items,key) => {
                                return  <tr style={trstyle}>
                                <td>{key+1}</td>
                            <td>{items.realname}</td>
                            <td>{items.idCard}</td>
                            <td>{items.mobile}</td>
                            <td>{items.gender ?'男':'女'}</td>
                            <td>{items.finishNum}</td>
                            </tr>
                            })
                        }
                        <tr style={trstyle}>
                            <td colspan="6">未合格学员名单</td>
                        </tr>
                        {
                            this.state.unqualified.length === 0?
                            <tr style={trstyle}>
                                <td colspan="6">暂无</td>
                            </tr>
                            :
                            <tr style={trstyle}>
                                <td>序号</td>
                                <td>姓名</td>
                                <td>身份证号</td>
                                <td>手机号</td>
                                <td>性别</td>
                                <td>完成学时</td>
                            </tr>
                        }
                        {
                            this.state.unqualified.map((items,key) => {
                                return  <tr style={trstyle}>
                                <td>{key +1}</td>
                            <td>{items.realname}</td>
                            <td>{items.idCard}</td>
                            <td>{items.mobile}</td>
                            <td>{items.gender ?'男':'女'}</td>
                            <td>{items.finishNum}</td>
                            </tr>
                            })
                        }
                    </thead>
                    <tbody>
                    </tbody>
                    </table>
            </div>
        )
    }
}
export default ProveDom;